<template>
    <div id="update">
      <div id="progress">
        <div class="left">
            <el-progress :text-inside="true" :stroke-width="24" :percentage="percent" :color="customColors"></el-progress>
        </div>
        <div class="right" v-if="total > 0 && transferred > 0">
           <span >{{bytesPerSecond}}KB/s &nbsp;{{transferred}} MB / {{total}} MB</span>
        </div>
      </div>
      <div class="update-title">
        <p v-if="downloaded">下载完成，是否立即重启？</p>
        <p v-if="!downloaded">正在下载，请稍候...</p>
      </div>
      <el-row v-if="downloaded" class="update-btn">
        <el-button @click="closeUpdateWin">稍后重启</el-button>
        <el-button type="primary" @click="restart">立即重启</el-button>
      </el-row>
     
    </div>
</template>

<script>
const { ipcRenderer } =  window.require('electron');




export default {
  name: 'Home',
 data(){
   return {
     downloaded:false,
     total:1,
     transferred:1,
     bytesPerSecond:0,
     percent:0,
     customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#6f7ad3', percentage: 80},
          {color: '#1989fa', percentage: 100},
          
        ]
   }
 },
 methods:{
   closeUpdateWin(){
    ipcRenderer.send('closeUpdateWin');
   }
   ,restart(){
    ipcRenderer.send('quitAndInstall');
   }

 },
 mounted(){
   
    ipcRenderer.on('download-progress',(event,data)=>{
      /** 
       * bytesPerSecond: 238783
        delta: 4320
        percent: 86.02606839248676
        total: 62703291
        transferred: 53941176
       * 
      */
      this.bytesPerSecond = (data.bytesPerSecond / 1024).toFixed(2)
      this.percent = data.percent.toFixed(0)
      this.total = (data.total / 1024 / 1024).toFixed(2)
      this.transferred = (data.transferred / 1024 / 1024).toFixed(2)
    })

    ipcRenderer.on('update-downloaded',(event,data)=>{
      this.downloaded = true;
      this.percent = 100;
    })
 }
};
</script>

<style lang="less">
#update{
  #progress{
    display:flex;
    margin:20px 10px;
    .right{
      line-height:24px;
      text-align:left;
      padding:0 5px;
      font-weight:bold;
    }
    .left{
      flex:1;
    }
  }
  .update-btn{
    text-align:center;
  }
  .update-title{
    text-align:center;
    font-size:16px;
    margin:5px;
  }
}
</style>
